<template>
  <div class="wdk">
    <Calendar
      backgroundText
      class-name="select-mode"
      :mode="obj.week"
      :remarks="remarks"
      @onSelect="aaa"
    />
    <div class="jrkc">
      <span>今日课程({{ obj.list.length }}节)</span>
      <span><van-icon @click="kc" size="26" name="newspaper-o" /></span>
    </div>
    <div class="youke" v-for="(item, index) in obj.list">
      <span class="s1">{{ item.name }}</span>
      <span>{{ filt(item.start_play) }}</span>
    </div>
    <div
      class="spkp"
      :class="obj.week != 'week' ? 'mtop' : ''"
      v-for="(item, index) in obj.list"
      @click="txq(item)"
    >
      <span class="q1">{{ item.info.course_classify_title }}</span>
      <p class="q2">{{ item.title }}</p>
      <span class="q3">课程有效期{{ filter1(item.end_play) }} </span>
      <ul>
        <li class="q4" v-for="(item1, index1) in item.info.teacher">
          <img class="qi" :src="item1.avatar" alt="" /><span>{{
            item1.teacher_name
          }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import Calendar from "mpvue-calendar";
import { getdqkc } from "../http/api.js";
const remarks = ref({ "2021-01-13": "some tings" });
const obj = reactive({
  time: "",
  week: "week",
  list: [],
  zt: false,
});
// 点击课程
const kc = () => {
  if (obj.week == "week") {
    obj.week = "";
  } else {
    obj.week = "week";
  }
};
const aaa = async (a) => {
  //   const date = new Date(a);
  const time3 = Date.parse(a);
  obj.time = time3 / 1000;
  const res = await getdqkc(obj.time);
  console.log(res);
  if (res.data.data.list) {
    obj.list = res.data.data.list;
    obj.zt = true;
  } else {
    obj.list = [];
    obj.zt = false;
  }
  console.log(obj.list);
};
function filt(d) {
  var now = new Date(d * 1000);
  var hour = now.getHours();
  console.log(hour);
  return `${hour}:00`;
}
function filte(i) {
  if (i == 0) {
    return "免费";
  } else {
    return i / 100;
  }
}
function filter1(time) {
  var date = new Date(time);
  var len = time.toString().length;
  if (len < 13) {
    var sub = 13 - len;
    sub = Math.pow(10, sub);
    date = new Date(time * sub);
  }
  // var y = date.getFullYear() + '年';
  var M = date.getMonth() + 1;
  M = (M < 10 ? "0" + M : M) + "月";
  var d = date.getDate();
  d = (d < 10 ? "0" + d : d) + "日";
  var h = date.getHours();
  h = (h < 10 ? "0" + h : h) + ":";
  var m = date.getMinutes();
  m = m < 10 ? "0" + m : m;
  return M + d + h + m;
}
</script>
<style lang="scss" scoped>
.jrkc {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  span {
    font-size: 26px;
  }
}
.wdk {
  width: 100%;
  height: 100px;
}
.vc-calendar-tools-container {
  display: none !important;
}
.s1 {
  display: inline-block;
  width: 60%;
  overflow: hidden;
  /*将对象作为弹性伸缩盒子模型显示*/
  display: -webkit-box;
  /*设置子元素排列方式*/
  -webkit-box-orient: vertical;
  /*设置显示的行数，多出的部分会显示为...*/
  -webkit-line-clamp: 1;
}
.mtop {
  margin-top: 230px;
}
.youke {
  display: flex;
  padding: 15px 30px;
  justify-content: space-between;
}
.q5 {
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
}
.ls {
  color: green;
}
.hs {
  color: red;
}
.qi {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
ul {
  padding: 15px 0;
  display: flex;
  li {
    display: flex;
    align-items: center;
    margin-right: 10px;
    img {
      margin-right: 5px;
    }
  }
}
.q3 {
  margin-left: 15px;
  display: inline-block;
  padding: 8px 8px;
  background: #f5f6f8;
  border-radius: 15px;
}
.q2 {
  padding: 15px 0 5px 0;
  font-size: 26px;
}
.q1 {
  background: #f15a24;
  padding: 5px 15px;
  color: #fff;
}
.spkp {
  padding: 15px;
}
.kk {
  border-bottom: 3px #f15a24 solid;
  display: inline-block;
  box-sizing: border-box;
  padding: 15px;
}
.zj {
  padding: 15px;
}
* {
  list-style: none;
}
.js {
  width: 90%;
  margin: 0 auto;
  transform: translateY(-50%);
  background: #fff;
  padding: 15px;
  border-radius: 10px;
}
.ll {
  height: 100px;
  text-align: center;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  span {
    margin-top: 15px;
  }
}
.ii {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.center {
  height: 400px;
  background-color: #51bdfd;
  border-top: 1px solid #51bdfd;
  position: relative;
  margin-top: 45px;
}
.msxq {
  width: 100%;
  height: 100vh;
  overflow: auto;
  //   height: 100% !important;
}
.title {
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 0;
  right: 0;
  box-sizing: border-box;
  top: 0;
  background: #fff;
  width: 100%;
  padding: 15px;
  z-index: 1000;
  span {
    font-size: 35px;
  }
}
</style>
<style>
.vc-calendar-tools-container {
  display: none !important;
}
</style>
